<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="{% block description %}Task{% endblock %}" />
<meta name="keywords" content="{% block keywords %}Task{% endblock %}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}{% endblock %} - Task</title>
<link href="{{ baseUrl() }}/css/pure.css" rel="stylesheet" />
<link href="{{ baseUrl() }}/css/task.css" rel="stylesheet" />
</head>
<body>
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a>
    <aside id="menu">
        <header>
            <a class="pure-menu-heading" href="{{ siteUrl }}">Task</a>
            <a class="dropdown-toggle" href="#" data-toggle="dropdown">
              <span title="{{ project.name }}" class="project-name">{{ project.name }}</span>
              <i class="iconfont prag-chevron-down"></i>
            </a>
            <ul class="dropdown-menu">
                {% block projects %}
                {% endblock %}
            </ul>
        </header>
        <div>
            <nav class="pure-menu pure-menu-open">
                <ul>
                    <li class="pure-menu-selected"> <a href="{{ urlFor('task-inbox',{'id':project.id}) }}">Inbox</a></li>
                    {% block groups %}
                    {% endblock %}
                </ul>
            </nav>
        </div>
        <footer>
            <a href="#">Add</a>
            <a href="#">Manage</a>
        </footer>
    </aside>
    <main id="main">
        <section class="panel list-panel">
            <header>
                <a href="#">Add</a>
                <a href="#">Archive</a>
            </header>
            <div class="content">
                <ul>
                    {% block todolist %}
                    {% endblock %}
                </ul>
            </div>
        </section>
        <div class="panel detail-panel">
            <header>
                <a href="#">Tom</a>
                <ul class="dropdown-menu">
                    <li><a href="#">个人资料</a></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </header>
            <div class="content">
                {% block todo %}
                {% endblock %}
            </div>
        </div>
        {% block content %}{% endblock %}
    </main>
</div>
<script src="{{ baseUrl() }}/js/jquery-2.1.1.min.js"></script>
<script src="{{ baseUrl() }}/js/knockout-3.2.0.js"></script>
<script src="{{ baseUrl() }}/js/knockout.validation.min.js"></script>
{% block script %}{% endblock %}
</body>
</html>
